<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            margin: 0 auto;
        }
        .imgContainer {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 0 auto;
        }

        .imgContainer div img {
            position: absolute;
            transition: opacity 2s;
            opacity: 0;
        }
        .imgContainer div:nth-of-type(1) img{
            opacity: 1;
        }
        .right {
            margin: 0 auto;
            font-size: 16px;
            color: rgb(29, 120, 148);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="imgContainer">
            <div><img src="../images/1t.png" alt=""></div>
            <div><img src="../images/2t.png" alt=""></div>
            <div><img src="../images/3t.png" alt=""></div>
        </div>
        <button class="right">下一张</button>
    </div>
    <script>
        var flag = 0 ;
        autoPlay();
        function autoPlay(){
            var imgEles = document.querySelectorAll(".imgContainer div img");
            var timer = setInterval(function (){
                flag ++ ;
                imgEles.forEach(function(imgEle){
                    imgEle.style.opacity = 0 ;
                });
                flag %= 3 ;
                imgEles[flag].style.opacity = 1 ;
            },2000);
            chanPlay(timer);
        }
        function chanPlay(timer){
            var imgEles = document.querySelectorAll(".imgContainer div img");
            var btn = document.querySelector(".right");
            btn.onmouseenter = function (){
                clearTimeout(timer);
            }
            btn.onclick = function () {
                flag ++ ;
                imgEles.forEach(function(imgEle){
                    imgEle.style.opacity = 0 ;
                });
                flag %= 3 ;
                imgEles[flag].style.opacity = 1 ; 
            }
            btn.onmouseleave = function (){
                autoPlay();
            }
        }
    </script>
</body>

</html>